<template>
	<view class="lonetrail-container">
		<view class="bg-layer">
			<view class="metallic-gradient"></view>
		</view>

		<view class="orbit-system">
			<view class="orbit-ring ring-1"></view>
			<view class="orbit-ring ring-2"></view>
		</view>

		<view class="top-hud">
			<text class="hud-text">C.W. SYSTEM // OFFLINE</text>
			<text class="hud-text">INITIATE LOGIN...</text>
		</view>

		<view class="login-core">
			<view class="token-frame">
				<view class="frame-deco top"></view>
				<view class="frame-deco bottom"></view>
				<u--image
					:showLoading="true"
					src="../../../static/艾什TOKEN.png"
					width="160rpx"
					height="160rpx"
				></u--image>
			</view>
			
			<text class="login-prompt">AUTHORIZATION REQUIRED</text>
			
			<view class="login-control-deck">
				<button 
					class="lonetrail-button" 
					hover-class="lonetrail-button-hover"
					@click="handelLogin()"
					:disabled="loading"
				>
					<view class="btn-text-wrapper">
						<text class="btn-text">{{ loading ? 'DATA LOADING...' : '一键登录' }}</text>
						<view class="btn-color-strip"></view>
					</view>
				</button>
			</view>
		</view>
		
		<text class="copyright">RHODES ISLAND // TERMINAL ACCESS</text>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	
	import { wechatLogin } from '../../api/auth/user'
	
	export default {
		data() {
			return {
				title: 'Hello',
				loading:false
			}
		},
		onLoad() {
		},
		methods: {
			async handelLogin()
			{
			this.loading=true
			const {code}=await uni.login({
				provider:'weixin'
			})
			
			const res =await wechatLogin(code);
			console.log('后端返回的 res 完整结构：', res);
			if(res.code==200)
			{
				
				uni.setStorageSync("token",res.token)
				uni.setStorageSync("userinfo",res.userinfo)
			
				if(res.userinfo.phone==null)
				{
				uni.navigateTo({
					url:'/pages/bindphone/bindphone',
				})
				
				}else 
				  {
					
					uni.switchTab({
					          url: '/pages/home/home',
					          fail: (err) => { console.error('switchTab failed:', err); }
					        });
					//   uni.navigateTo({
					//   					url:'/pages/home/home'
					//   				})
				  }
				  }else{
					  
					 this.$refs.uToast.show({
						    type: "error",
							icon: "false",
						    message: "登录失败" })

				}
			
				this.loading=false
			}

		}
	}
</script>

<style lang="scss" scoped>
/* 孤星主视觉图颜色精确提取 */
$lt-bg-main: #5C5E62; // 图中背景主体灰白
$lt-bg-darker: #3C3F44; // 图中背景深色区域
$lt-text-light: #F0F0F0; // 图中 LONETRAIL 等亮色文本
$lt-text-mid: #A0A0A0; // 图中顶部细字等中灰文本
$lt-text-dark: #303030; // 图中 LONETRAIL 字体内深色
$lt-border-light: rgba(240, 240, 240, 0.2); // 亮色边框
$lt-border-dark: rgba(0, 0, 0, 0.1); // 暗色边框

// LONETRAIL 下方的三色条
$lt-strip-red: #AF4047;
$lt-strip-yellow: #C7823F;
$lt-strip-cyan: #469688;


.lonetrail-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: $lt-bg-darker; // 使用图中更深的背景色
  overflow: hidden;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  color: $lt-text-light;
}

/* 背景层 - 金属感渐变 */
.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  
  .metallic-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    // 渐变调整为更接近图中背景的亮灰到深灰
    background: radial-gradient(circle at 50% 50%, $lt-bg-main 0%, $lt-bg-darker 80%);
    // 添加一层径向渐变，模拟图中中心透出的亮光
    box-shadow: inset 0 0 150rpx rgba(255,255,255,0.05);
  }
}

/* 轨道动画系统 */
.orbit-system {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600rpx;
  height: 600rpx;
  z-index: 1; 
  pointer-events: none;
}
.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05); // 更淡的白色边框
  opacity: 0.15; // 更高的透明度
}
.ring-1 {
  width: 140%;
  height: 140%;
  border-left: 1px solid rgba(255, 255, 255, 0.15); // 轨道颜色与图中细线类似
  animation: rotate 20s linear infinite;
}
.ring-2 {
  width: 100%;
  height: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.1); // 轨道颜色与图中细线类似
  animation: rotate 15s linear infinite reverse;
}

/* 顶部状态栏 */
.top-hud {
  position: fixed;
  top: 60rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 40rpx;
  box-sizing: border-box;
  z-index: 10;
  
  .hud-text {
    font-size: 20rpx;
    letter-spacing: 2px;
    color: $lt-text-mid; // 匹配图中顶部细小文字的颜色
    font-weight: bold;
  }
}

/* 登录核心区域 */
.login-core {
	position: absolute;
	top: 35%; 
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 10;
	width: 100%;
}

/* Token 图片框架 */
.token-frame {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid $lt-border-light; // 亮色边框
	margin-bottom: 60rpx;
	background: rgba(0, 0, 0, 0.2); // 更透明的黑色背景
	box-shadow: inset 0 0 20rpx rgba(0,0,0,0.5); // 内部阴影，增加深度感
	
	/* 装饰线 */
	.frame-deco {
		position: absolute;
		left: -10rpx;
		width: 20rpx;
		height: 2px;
		background: $lt-strip-cyan; // 保持青色装饰
		
		&.top {
			top: 10rpx;
			transform: rotate(45deg);
		}
		&.bottom {
			bottom: 10rpx;
			transform: rotate(-45deg);
		}
	}
}

.login-prompt {
	font-size: 28rpx;
	color: $lt-text-mid; // 匹配图中中灰文本
	letter-spacing: 2px;
	margin-bottom: 100rpx;
}

/* 登录按钮区域 */
.login-control-deck {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* 按钮样式 */
.lonetrail-button {
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
  width: 600rpx; 
  height: 110rpx; 
  display: flex;
  justify-content: center;
  align-items: flex-start; 
  position: relative;
  
  &::after { border: none; }
}

.btn-text-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: $lt-text-light; // 按钮主体为图中 LONETRAIL 的亮色
  display: flex;
  align-items: center;
  justify-content: center;
  color: $lt-text-dark; // 文字颜色为图中 LONETRAIL 字体内深色
  font-weight: 900; 
  font-size: 32rpx;
  letter-spacing: 4px;
  transition: all 0.2s ease-out;
  
  /* 按钮切角 */
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - 15px), 
    calc(100% - 15px) 100%, 
    0 100%, 
    0 15px
  );
  box-shadow: 0 5rpx 15rpx rgba(0,0,0,0.2); // 增加按钮立体感
}

/* 核心视觉：三色条装饰 */
.btn-color-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15rpx; 
  background: linear-gradient(to right, 
    $lt-strip-red 0%, 
    $lt-strip-red 33%, 
    $lt-strip-yellow 33%, 
    $lt-strip-yellow 66%, 
    $lt-strip-cyan 66%, 
    $lt-strip-cyan 100%
  );
  z-index: 2; 
}

.lonetrail-button-hover .btn-text-wrapper {
  background: darken($lt-text-light, 5%); // 悬停时稍微变暗一点
  color: $lt-text-dark; 
  transform: translateY(-3rpx); // 模拟按下的轻微浮起感，但幅度减小
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.4);
}

.copyright {
  position: fixed;
  bottom: 40rpx; 
  left: 50%;
  transform: translateX(-50%);
  font-size: 16rpx;
  color: rgba(240,240,240,0.3); // 匹配图中底部细小文字的颜色
  letter-spacing: 2px;
  z-index: 10;
}

/* 动画保留，确保轨道旋转 */
@keyframes rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
</style>